<template>
  <view class="content">
    <u-tabs
      :list="list"
      @click="click"
      keyName="title"
      :scrollable="false"
      :current="current"
    ></u-tabs>
    <view class="Operation-box">
      <view
        class="myOperationItem flex justify-between align-center"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <view>
          <view class="fontW-7 font-34">{{ item.assetName }}</view>
          <view class="tips">{{ showTimeTxt(item) }}</view>
          <view class="tips">{{ item.assetType }}</view>
          <view class="tips">{{ item.assetWare }}</view>
        </view>
        <button
          class="login-btn cu-btn block bg-blue lg round"
          @click="
            jump(
              `/pages/reportForRepair/index?id=${item.id}&title=${typeObj.title}&repairType=${typeObj.repairType}&flag=edit`
            )
          "
        >
          {{
            statusArr.find((obj) => item.status === obj.id)
              ? statusArr.find((obj) => item.status === obj.id).label
              : "查看"
          }}
        </button>
      </view>
      <view v-if="dataList.length === 0"><u-empty mode="list"> </u-empty></view>
    </view>
  </view>
</template>
  
<script>
import { getMineByPage } from "@/api/system/myOperation";
import { mapState } from "vuex";
export default {
  data() {
    return {
      query: null,
      current: 1,
      list: [
        {
          title: "保养",
          repairType: 1,
        },
        {
          title: "报修",
          repairType: 2,
        },
        {
          title: "维修",
          repairType: 3,
        },
        {
          title: "出借",
          repairType: 4,
        },
        {
          title: "归还",
          repairType: 5,
        },
      ],
      dataList: [],
      pageNumber: 1,
    };
  },
  onLoad: function (option) {
    if (option?.repairType) {
      this.query = option || {};
      this.current = this.list.findIndex(
        (item) => item.repairType == option?.repairType
      );
    }
  },
  onReachBottom() {
    if (this.status === "nomore") return;
    this.pageNumber++;
    this.getData(1);
  },
  onShow() {
    this.pageNumber = 1;
    this.getData();
  },
  computed: {
    ...mapState("user", ["statusArr"]),
    typeObj() {
      return this.list[this.current] || {};
    },
  },
  methods: {
    showTimeTxt(item) {
      let repairType = this.list[this.current].repairType;
      if (repairType === 1) {
        return item.processTime || "-";
      } else if (repairType === 2) {
        return item.repairTime || "-";
      } else if (repairType === 3) {
        return item.processTime || "-";
      } else if (repairType === 4) {
        return item.repairTime || "-";
      } else if (repairType === 5) {
        return item.processTime || "-";
      } else {
        return "-";
      }
    },
    jump(url) {
      this.$tab.navigateTo(url);
    },
    click(e) {
      this.current = e.index;
      this.dataList = [];
      this.pageNumber = 1;
      this.getData();
    },
    getData(num) {
      getMineByPage({
        pageSize: 10,
        pageNumber: this.pageNumber,
        type: this.list[this.current]?.repairType,
      }).then((res) => {
        let arr = res?.result?.records || [];
        if (num) {
          this.dataList.push(...arr);
        } else {
          this.dataList = arr;
        }
        console.log(this.dataList);
      });
    },
  },
};
</script>
  
<style lang="scss">
page {
  background: #fff;
}
.Operation-box {
  border-top: 1px solid #eee;
}
.myOperationItem {
  border-bottom: 1px solid #eee;
  padding: 40upx;
  .tips {
    color: #666;
  }
}
</style>
  